<template>
  <div class="achievement" v-cloak>
    <div class="bg_color"></div>
    <div style="height: 4px;position: absolute;z-index: 2222; width: 100%; top: 46px;background: #f0f0f0" v-transfer-dom></div>
    <div style="height: 50px;"></div>
    <div class="about-us" v-show="show">
      <div class="order_time" v-show="time">
      <div class="order_kl">
        <div class="order_l">
          <span class="order_timeh"><img src="../assets/image/btn_rl.png" alt=""></span>
          <!--<input type="text" placeholder="请输入开始时间">-->
          <group title="Readonly" style="width: 99px; float: left">
            <datetime v-model="value1" @on-change="changeval"></datetime>
          </group>
        </div>
        <div class="order_r">
          <!--<input type="text" placeholder="请输入结束时间">-->
          <group title="Readonly" style="width: 99px;float: right">
            <datetime v-model="value2" @on-change="changeend"></datetime>
          </group>
          <span class="order_timeh"><img src="../assets/image/btn_rl.png" alt=""></span>
        </div>
        <p class="map_tu">~</p>
      </div>
      </div>
      <ul class="reserva" :class="{topres : time}">
        <li :class="{ active : currentindex == index}" v-for="(item,index) in menuS" @click="checkMenu(index, item)">
          {{item}}
        </li>
      </ul>
      <div class="heightv" :class="{ heights : time}"></div>
      <mt-loadmore :distanceIndex="4" @top-status-change="handleTopChange" :topDistance="30" :bottomDistance='30' :maxDistance="40" :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="bottomAllLoaded" ref="loadmore" :autoFill="false" :bottomAllLoaded = bottomsta>
        <div slot="top" class="mint-loadmore-top">
          <span v-show="topStatus === 'loading'" class="color_top">Loading...</span>
        </div>
        <div class="rese_content" v-for="(item,index) in list" v-if="evasta" @click="reserviceDeatil(item.so_id, item.so_status)">
          <p class="rese_p">
            <span class="fl_right1 colo_yellow">{{item.so_status}}</span>
            预约编号 {{item.so_order_no}}
          </p>
          <p class="res_p1">
            {{item.so_service_name}}
          </p>
          <p class="rese_p">
            <span class="fl_right1 colo_red" v-if="title === '我的服务'">{{item.so_pay_price}}</span>
            服务时间：{{item.so_service_time}}
          </p>
          <p class="rese_p2">
            <span class="fl_right1 btn_y" v-if="item.so_btn_name != '' && title == '我的服务'" @click.stop="payOrder(item.so_id, item.so_order_no, item.so_btn_name, item.so_pay_price, item.staff_headimg, item.staff_nickname)">{{item.so_btn_name}}</span>
            <span class="fl_right1 btn_y" v-if="title == '我的订单' && item.so_status == '待接单'" @click.stop="serviceReceipt(item.so_id, index)">接单</span>
            下单时间：{{item.so_add_time}}
          </p>
        </div>
        <div v-if="!evasta" class="nosta">
            暂无{{menuname}}{{sercicename}}
        </div>
        <div slot="bottom" class="mint-loadmore-bottom">
          <load-more tip="正在加载" v-show="loadingBottomShow"></load-more>
        </div>
      </mt-loadmore>
      <div class="delFix" @click="hideFix" v-if="isDel">
        <div class="fixBox">
          <p>确定要{{buttonname}}吗？</p>
          <div class="cancel btn" @click="hideFix" style="line-height:22px;float: left;margin-left: 20px;">取消</div>
          <div class="confirm btn" @click.stop="submit" style="line-height:22px;">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { LoadMore, Swiper, Datetime, TransferDom } from 'vux'
  import { Loadmore } from 'mint-ui'
  import Vue from 'vue'
  Vue.component(Loadmore.name, Loadmore)
  export default {
    components: {
      LoadMore,
      Swiper,
      Datetime
    },
    directives: {
      TransferDom
    },
    name: 'MyMenu',
    data () {
      return {
        readonly: true,
        value1: '请输入开始时间',
        value2: '请输入结束时间',
        show: true,
        content: '',
        title: '',
        time: false,
        currentindex: 0,
        menuS: ['全部服务', '进行中', '待评价', '已完成'],
        userinfo: {
          order_status: '',
          start: 0,
          limit: 10
        },
        staffinfo: {
          order_status: '',
          end_id: 0,
          limit: 10,
          start_date: '',
          end_date: ''
        },
        list: [],
        research: true,
        evasta: true,
        menuname: '',
        loadingBottomShow: false,
        topStatus: 'loading',
        bottomsta: false,
        bottomAllLoaded: false,
        isDel: false,
        ser_id: '',
        sercicename: '服务',
        buttonname: '接单',
        ajaxsta: true
      }
    },
    methods: {
      changeval (value) {
        if (this.value2 !== '请输入结束时间') {
          this.staffinfo.start_date = value
          this.staffinfo.end_date = this.value2
          this.staffinfo.end_id = 0
          this.list = []
          this.research = true
          this.evasta = true
          this.menuAjax('')
        }
      },
      changeend (value) {
        if (this.value1 !== '请输入开始时间') {
          this.staffinfo.start_date = this.value1
          this.staffinfo.end_date = this.value2
          this.staffinfo.end_id = 0
          this.list = []
          this.research = true
          this.evasta = true
          this.menuAjax('')
        }
      },
      serviceReceipt: function (soid, index) {
        this.ser_id = soid
        this.ser_index = index
        this.isDel = true
      },
      hideFix: function () {
        this.isDel = false
      },
      submit: function () {
        let thisObj = this
        if (thisObj.buttonname === '接单') {
          thisObj.$chaos.ajax({
            data: {
              so_id: thisObj.ser_id
            },
            slient: true,
            userinfo: true,
            url: 'Service/serviceReceipt',
            callback: function (type, res) {
              if (res.status === 'SUCCESS') {
                thisObj.$vux.toast.show({
                  text: res.result.msg,
                  type: 'text',
                  width: '180px',
                  position: 'bottom'
                })
                thisObj.isDel = false
                thisObj.list.splice(thisObj.ser_index, 1)
              } else {
                thisObj.show = true
                thisObj.$vux.toast.show({
                  text: res.result.msg,
                  type: 'text',
                  width: '180px',
                  position: 'bottom'
                })
              }
            }
          })
        } else if (thisObj.buttonname === '完成订单') {
          thisObj.$chaos.ajax({
            data: {
              so_id: thisObj.ser_id
            },
            slient: true,
            userinfo: true,
            url: 'Service/finishServiceOrder',
            callback: function (type, res) {
              if (res.status === 'SUCCESS') {
                thisObj.$vux.toast.show({
                  text: res.result.msg,
                  type: 'text',
                  width: '180px',
                  position: 'bottom'
                })
                thisObj.menuAjax('')
                thisObj.isDel = false
              } else {
                thisObj.show = true
                thisObj.$vux.toast.show({
                  text: res.result.msg,
                  type: 'text',
                  width: '180px',
                  position: 'bottom'
                })
              }
            }
          })
        }
      },
      reserviceDeatil: function (soid, sta) {
        if (!this.ajaxsta) {
          return false
        }
        window.location.href = '#/ReservationDetail?so_id=' + soid + '&order_status=' + encodeURI(sta) + '&title=' + encodeURI(this.title)
      },
      setmode: function (name, content) {
        let mode = this.$chaos.config('mode')
        if (mode === 'website') {
          sessionStorage[name] = JSON.stringify(content)
        } else {
          localStorage[name] = JSON.stringify(content)
        }
      },
      payOrder: function (id, order, button, money, img, name) {
        let thisObj = this
        if (button === '付款') {
          thisObj.$vux.loading.show({
            text: '加载中'
          })
//          window.location.href = '#/PayOrder?id=' + id + '&order=' + order + '&money=' + money
          thisObj.$chaos.ajax({
            data: {
              order_no: order,
              openid: thisObj.$chaos.getOpenId()
            },
            slient: true,
            userinfo: false,
            url: 'Pay/jsapiPayOrder',
            callback: function (type, res) {
              thisObj.$vux.loading.hide()
              if (res.status === 'SUCCESS') {
                WeixinJSBridge.invoke(
                  'getBrandWCPayRequest', {
                    'appId': res.result.wxpay_data.appid,
                    'timeStamp': '' + res.result.wxpay_data.timestamp,
                    'nonceStr': res.result.wxpay_data.noncestr,
                    'package': 'prepay_id=' + res.result.wxpay_data.prepayid,
                    'signType': 'MD5',
                    'paySign': res.result.wxpay_data.sign
                  },
                  function (res) {
                    if (res.err_msg === 'get_brand_wcpay_request:ok') {
                      thisObj.$vux.toast.show({
                        text: '恭喜您下单成功',
                        type: 'text',
                        width: '180px',
                        position: 'bottom'
                      })
//                      setTimeout(function () {
//                        window.history.back(-1)
//                      }, 600)
                    }
                  }
                )
              } else {
                thisObj.show = true
                thisObj.$vux.toast.show({
                  text: res.result.msg,
                  type: 'text',
                  width: '180px',
                  position: 'bottom'
                })
              }
            }
          })
        } else if (button === '评价') {
          this.setmode('evaimg', img)
          window.location.href = '#/Evaluate?order_no=' + order + '&headimg=' + encodeURI(img) + '&name=' + encodeURI(name) + '&call=' + 1
        } else if (button === '完成') {
          this.buttonname = '完成订单'
          this.ser_id = id
          this.isDel = true
        }
      },
      loadBottom () {
        this.loadingBottomShow = true
        if (this.research === true) {
          this.menuAjax('')
        } else {
          this.loadingBottomShow = false
          this.$refs.loadmore.onBottomLoaded()
        }
      },
      handleTopChange (status) {
        this.topStatus = status
      },
      loadTop () {
        if (this.title === '我的服务') {
          this.userinfo.start = 0
        } else {
          this.staffinfo.end_id = 0
        }
        this.evasta = true
        this.research = true
        this.bottomsta = false
        this.menuAjax('reflsh')
      },
      zeroize: function (num) {
        return (String(num).length === 1 ? '0' : '') + num
      },
      checkMenu: function (num, name) {
        this.menuname = name
        this.value1 = '请输入开始时间'
        this.value2 = '请输入结束时间'
        if (this.title === '我的服务') {
          this.userinfo.order_status = name
          this.userinfo.start = 0
          this.currentindex = num
        } else {
          this.staffinfo.order_status = name
          this.staffinfo.end_id = 0
          this.currentindex = num
          if (num === 3) {
            this.time = true
          } else {
            this.time = false
          }
        }
        this.list = []
        this.research = true
        this.evasta = true
        this.menuAjax('')
      },
      timestampToTime: function (timestamp) {
        let date = new Date(timestamp * 1000)
        let Y = date.getFullYear() + '-'
        let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        let D = this.zeroize(date.getDate()) + ' '
        let h = this.zeroize(date.getHours()) + ':'
        let m = this.zeroize(date.getMinutes()) + ':'
        let s = this.zeroize(date.getSeconds())
        return Y + M + D + h + m + s
      },
      menuAjax: function (title) {
        let thisObj = this
        let ajaxUrl = ''
        let datainfo = {}
        thisObj.ajaxsta = false
        if (thisObj.title === '我的服务') {
          ajaxUrl = 'User/getUserServiceOrder'
          datainfo = thisObj.userinfo
        } else {
          ajaxUrl = 'User/getStaffOrder'
          datainfo = thisObj.staffinfo
        }
        thisObj.$chaos.ajax({
          data: datainfo,
          slient: true,
          userinfo: true,
          url: ajaxUrl,
          callback: function (type, res) {
            thisObj.ajaxsta = true
            if (res.status === 'SUCCESS') {
              thisObj.show = true
              if (title === 'reflsh') {
                thisObj.list = []
                thisObj.$refs.loadmore.onTopLoaded()
              }
              thisObj.loadingBottomShow = false
              thisObj.$refs.loadmore.onBottomLoaded()
              if (res.result.order_list.length === 0) {
                thisObj.research = false
                if (thisObj.title === '我的服务') {
                  if (thisObj.userinfo.start === 0) {
                    thisObj.evasta = false
                  }
                } else {
                  if (thisObj.staffinfo.end_id === 0) {
                    thisObj.evasta = false
                  }
                }
                return false
              }
              if (res.result.order_list < thisObj.limit) {
                thisObj.bottomsta = true
                thisObj.research = false
              } else {
                if (thisObj.title === '我的服务') {
                  thisObj.userinfo.start = thisObj.userinfo.start + 10
                } else {
                  thisObj.staffinfo.end_id = res.result.end_id
                }
              }
              if (res.result.order_list.length > 0) {
                if (thisObj.title === '我的服务') {
                  for (let i = 0; i < res.result.order_list.length; i++) {
                    res.result.order_list[i].so_service_time = thisObj.timestampToTime(res.result.order_list[i].so_service_time)
                    res.result.order_list[i].so_add_time = thisObj.timestampToTime(res.result.order_list[i].so_add_time)
                  }
                }
                thisObj.list = thisObj.list.concat(res.result.order_list)
              }
            } else {
              thisObj.show = true
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      verify: function () {
        let thisObj = this
        thisObj.title = decodeURI(this.$chaos.getQueryString('title'))
        this.$chaos.setTitle(this.title)
        this.$store.commit('headerShow', true)
        this.$store.commit('title', this.title)
        this.$store.commit('footerShow', false)
        if (thisObj.title === '我的订单') {
          thisObj.menuS[0] = '待接单'
          thisObj.menuname = '待接单'
          thisObj.sercicename = '订单'
        }
        this.$chaos.verify(function () {
          thisObj.menuAjax()
        })
      }
    },
    created: function () {
      this.verify()
    },
    mounted: function () {
      window.scrollTo(0, 2000)
    },
    watch: {
      '$route': 'verify'
    }
  }
</script>
<style lang="less">
  @import '~vux/src/styles/reset.less';
  [v-cloak] {
    display: block;
  }
  @datetime-header-item-font-size:14px;
  .weui-cell__ft{
    text-align: center!important;
  }
  .vux-cell-value{
    font-size: 13px!important;
  }
  .weui-cell div:after{
    content: " ";
    display: inline-block;
    height: 0px!important;
    width: 0px!important;
    border-width: 0px!important;
    position: absolute;
    top: 0!important;
    margin-top: 0px!important;
    right: 0px!important;
  }
  .weui-cell_access .weui-cell__ft{
    padding-right: 0px!important;
  }
  .colo_red{
    color: red;
  }
  .topres{
    top:91px!important;
  }
  .heightv{
    height:41px
  }
  .heights{
    height:82px;
  }
  body,
  html {
    background: #f9f9f9;
  }
  .con_term{
    padding: 0px 15px;
  }
  .weui-cell{
    padding: 0px!important;
    margin-top: -3px;
    font-size: 12px!important;
  }
  .order_time {
    background: #fff;
    padding: 10px 0px;
    margin-bottom: 1px;
    overflow: hidden;
    position: fixed;
    width: 100%;
    top: 50px;
    left: 0px;
    z-index: 4444;
  }
  .order_l {
    width: 47%;
    float: left;
  }
  .order_timeh {
    width: 18px;
    height: 18px;
    display: block;
    float: left;
    margin-right: 8px;
  }
  img {
    width: 100%;
    height: 100%;
  }
  .order_l input {
    float: left;
    width: 100px;
    /*margin-top: 2px;*/
  }
  input {
    outline: none;
  }
  .order_r {
    width: 47%;
    float: right;
  }
  .order_r input {
    float: right;
    width: 100px;
    /*margin-top: 2px;*/
  }
  .order_r .order_timeh {
    float: right;
  }
  .map_tu {
    width: 30px;
    margin: 0 auto;
    color: #dadada;
  }
  .reserva {
    background: #fff;
    margin-bottom: 4px;
    height: 37px;
    line-height: 37px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: fixed;
    width: 100%;
    top: 50px;
    z-index: 333;
    padding: 0px;
  }
  ul, li {
    list-style: none;
  }
  .reserva li {
    position: relative;
    flex: 1;
    text-align: center;
  }
  .reserva li.active:after {
    content: '';
    height: 1px;
    width: 40px;
    background: #ffa128;
    position: absolute;
    bottom: 0px;
    /* left: 15px; */
    left: 50%;
    margin-left: -20px;
  }
  .rese_content {
    background: #fff;
    padding: 0px 15px;
    margin-bottom: 4px;
  }
  .rese_p {
    line-height: 40px;
    border-bottom: 1px solid #f9f9f9;
  }
  .order_kl{
    padding: 0px 15px 0px 15px;
  }
  .colo_yellow {
    color: #ffa128;
  }
  .fl_right1 {
    float: right;
  }
  .res_p1 {
    line-height: 30px;
  }
  .rese_p2 {
    color: #cacaca;
    line-height: 37px;
    font-size: 14px;
    overflow: hidden;
  }
  .fl_right1 {
    float: right;
  }
  .btn_y {
    width: 50px;
    height: 24px;
    text-align: center;
    color: #fff;
    background: #ffa128;
    border-radius: 5px;
    line-height: 24px;
    margin-top: 5px;
  }
  input, textarea{
    border:0px;

  }
  .nosta{
    text-align: center;
    margin-top: 20px;
    color: #999;
  }
  .mint-loadmore-top{
    text-align: center;
    line-height: 33px;
  }
  .delFix {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0,0,0,0.3);
    left: 0;
    top: 0;
    z-index: 1;
  }
  .delFix .fixBox {
    width: 200px;
    height: 70px;
    margin: 250px auto 0;
    background: #fff;
    border-radius: 10px;
    position: relative;
    padding: 30px 0 15px;
  }
  .delFix .fixBox > p {
    text-align: center;
    height: 20px;
    line-height: 20px;
    margin-bottom: 20px;
  }
  delFix .fixBox .cancel {
    float: left;
    margin-left: 23px;
    color: rgb(255,160,40);
  }
  .delFix .fixBox .btn {
    width: 65px;
    height: 25px;
    border: 1px solid rgb(255,160,40);
    border-radius: 5px;
    text-align: center;
  }
  .delFix .fixBox .confirm {
    float: right;
    margin-right: 23px;
    color: #fff;
    background: rgb(255,160,40);
  }
  .delFix .fixBox .btn {
    width: 65px;
    height: 25px;
    border: 1px solid rgb(255,160,40);
    border-radius: 5px;
    text-align: center;
  }
</style>
